/* jQuery plugin JSONtip Main CSS theme
	version: 2.0 - March 26, 2011
	author: stephen giorgi
	author email: stephen.giorgi@alphavega.com
	URL: http://www.alphavega.com/json-tip
	Copyright (C) 2011 alpha vega llc

	=================
	Table of Contents
	=================
	@1 - JSON tip
	@2 - Close Icon
		@2.1 - Close Icon Hover
		@2.2 - Close Icon Opposite Side
	@3 - Arrows
		@3.1 - Right
		@3.2 - Left
		@3.3 - Bottom Left
		@3.4 - Top Left
		@3.5 - Bottom Right
		@3.6 - Top Right
		@3.7 - Top Center
		@3.8 - Bottom Center
	@4 - Loading Icon

	=======
	License
	=======
	This program is free software; you can redistribute it and/or
	modify it under the terms of the GNU General Public License
	as published by the Free Software Foundation; either version 2
	of the License, or (at your option) any later version.
	
	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.
	
	You should have received a copy of the GNU General Public License
	along with this program; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/


/*=============*
 * @1 JSON tip *
 *=============*/
.JSONtip {
	background:#fff;
	/* in order to get the glass effect we must use the background-clip padding-box property
	 * This lets the white background not bleed into the border and cause it to be light grey instead of see through black
	 */
	-moz-background-clip:padding-box;
	-webkit-background-clip:padding-box;
	background-clip:padding-box;
	border:10px solid rgba(0,0,0,0.2);
	/*the border on the "glass" is made using a small white box shadow that goes all the way around the element*/
	-moz-box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	-webkit-box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	/*rounded the corners of the glass so you don't cut yourself*/
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	
	width:300px;		
	min-height:25px;
	max-height:80%;
	position:absolute;
	z-index:-10;
	display:none;
	color:#000;
}
.JSONtip h4 {
	border-bottom:3px solid #333;
	margin:5px 0;
	padding-bottom:5px;
	display:block;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#333;
	text-align:center;
	text-shadow:-1px -1px 3px rgba(0,0,0,0.4);
}
.JSONtip .JSONtipBody {
	margin:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

/*===============*
 * @2 Close Icon *
 *===============*/
.JSONtipClose {
	/*the close icon has a similar glass effect, but without needing the clip property*/
	background:rgba(0,0,0,0.2);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);
	-moz-box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);
	box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);

	padding-left:2px;	/*to center the text better*/
	width:24px;
	height:24px;
	position:absolute;
	top:-23px;
	right:-18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	font-weight:bold;
	color:#025CB7;
	text-align:center;
	text-shadow:0 1px 1px #fff;
	cursor:pointer;
}

/*@2.1 Close Icon Hover*/
.JSONtipClose:hover {
	background:#069;
	color:#000;
	text-shadow:0px 1px 1px #fff;
}

/*@2.2 Close Icon Opposite Side*/
.JSONtip.tipLeft .JSONtipClose,
.JSONtip.tipTopRight .JSONtipClose,
.JSONtip.tipBottomRight .JSONtipClose {
	left:-18px;
}
/*@2.3 No close Icon*/
.JSONtip.noClose .JSONtipClose { display:none; }


/*================*
 * @3 Arrow Icons *
 *================*/
.JSONtipArrow,
.JSONtipArrow .inArrow {
	border:12px solid transparent;
	position:absolute;
	width:0;
	height:0;
}
.JSONtipArrow .inArrow {
	border:11px solid transparent;
}

/*@3.1 Right -|- Default, the tip is on the Right side of the element & the arrow faces Left*/
.JSONtip.tipRight .JSONtipArrow {
	border-right:22px solid rgba(255, 255, 255, 0.4);
	top:2%;
	left:-45px;

}
.JSONtip.tipRight .JSONtipArrow .inArrow {
	border-right:19px solid rgba(0,0,0,0.5);
	top:-11px;
	left:-7px;
}

/*@3.3 Left -|- the tip is on the Left side of the element, & the arrow faces Right*/
.JSONtip.tipLeft .JSONtipArrow {
	border-left:22px solid rgba(255, 255, 255, 0.4);
	top:2%;
	right:-45px;
}
.JSONtip.tipLeft .JSONtipArrow .inArrow {
	border-left:19px solid rgba(0,0,0,0.5);
	top:-11px;
	right:-7px;
}

/*@3.3 Bottom Left -|- the tip is on the BOTTOM LEFT of the element, & the arrow faces UP on the LEFT SIDE*/
.JSONtip.tipBottomLeft .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	left:2%;
}
.JSONtip.tipBottomLeft .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*@3.4 Top Left -|- the tip is on the TOP LEFT of the element, & the arrow faces DOWN on the LEFT SIDE*/
.JSONtip.tipTopLeft .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	left:2%;
}
.JSONtip.tipTopLeft .JSONtipArrow .inArrow{
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	left:-11px;
}

/*@3.5 Bottom Right -|- the tip is on the BOTTOM RIGHT of the element, & the arrow faces UP on the RIGHT SIDE*/
.JSONtip.tipBottomRight .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	right:2%;
}
.JSONtip.tipBottomRight .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*@3.6 Top Right -|- the tip is on the TOP RIGHT of the element, & the arrow faces DOWN on the LEFT RIGHT*/
.JSONtip.tipTopRight .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	right:2%;
}
.JSONtip.tipTopRight .JSONtipArrow .inArrow {
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	right:-11px;
}

/*@3.7 Top Center -|- the tip is on the TOP CENTER of the element, & the arrow faces DOWN in the CENTER*/
.JSONtip.tipTopCenter .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	left:138px;		/*You can't use left 50% because it will put the left corner on the 50% mark, and it will be slightly off center, you can try 45%-46%, but it's still not perfect, the calculation is simple:
	(width of tip / 2) - width of outer arrow border
	(300 / 2) - 12 = 138*/
}
.JSONtip.tipTopCenter .JSONtipArrow .inArrow{
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	left:-11px;
}

/*@3.8 Bottom Center -|- the tip is on the BOTTOM CENTER of the element, & the arrow faces UP in the CENTER*/
.JSONtip.tipBottomCenter .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	left:138px;		/*You can't use left 50% because it will put the left corner on the 50% mark, and it will be slightly off center, you can try 45%-46%, but it's still not perfect, the calculation is simple:
	(width of tip /2) - width of border
	(300 / 2) - 12 = 138*/
}
.JSONtip.tipBottomCenter .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*=================*
 * @4 Loading Icon *
 *=================*/
.JSONloading {
	position:absolute;
	top:40%;
	left:45%;
}